<template>
  <div id="app" class="SkAreaIndex">
    <a-card>
      <div v-if="IntimacyShow">
        <div v-if="show">
          <a-card :bordered="true" style="margin-bottom: 19px;">
            <a-row type="flex" justify="space-between" :gutter="[12,28]">
              <a-col :span="8" v-for="item in areaPieList" :key="item.title" class="area-pie-col" >
                <p class="area-pie-title">{{ item.title }}</p>
                <pie :width="'100%'" :data="item.data" :height="'240px'" :formatter="false"></pie>
              </a-col>
            </a-row>
          </a-card>
          <!-- 室内区域 -->
          <sk-area-indoor  @areaInDoorData="getAeraData" @classData="getClassData"></sk-area-indoor>
          <!-- 户外区域 -->
          <sk-area-out-door @areaOutDoorData="getAeraData" @classData="getClassData"></sk-area-out-door>
          <!-- 专业活动室 -->
          <sk-area-activity-room @activityData="getAeraData"  @classData="getClassData"></sk-area-activity-room>
        </div>
        <sk-area-table v-else :classId="classId"  :dateType="dateType"  :tableTitle="tableTitle"  @areaTableData="getAeraData"></sk-area-table>
      </div>
      <sk-area-intimacy v-else :classId="classId"  :dateType="dateType"  :areaType="areaType"  @areaTableData="getAeraData"></sk-area-intimacy>
    </a-card>
  </div>
</template>
<script>
import Pie from "@/components/Echarts/Pie";
import SkAreaIndoor from "./modules/SkAreaIndoor";
import SkAreaOutDoor from "./modules/SkAreaOutDoor";
import SkAreaActivityRoom from "./modules/SkAreaActivityRoom.vue";
import SkAreaTable from "./modules/SkAreaTable.vue";
import SkAreaIntimacy from "./modules/SKAreaIntimacy.vue";
import { getAction } from "@/api/manage.js";
export default {
  name: 'SkAreaIndex',
  data() {
    return {
      show:true,
      IntimacyShow:true,
      areaPieList:[
        {title:"室内活动区域",data:[]},
        {title:"户外活动区域",data:[]},
        {title:"专业活动室区域",data:[]},
      ],
      tableTitle:"",
      classId:"0",
      dateType:"week",
      url:{
        areaCount:"/health/skSportRecord/getStudentCountInArea"
      },
      areaType:""
    }
  },
  components: {
    Pie,
    SkAreaIndoor,
    SkAreaOutDoor,
    SkAreaActivityRoom,
    SkAreaTable,
    SkAreaIntimacy
  },

  filters: {},

  computed: {},

  created() {
    this.getAreaData(0)
    this.getAreaData(1)
    this.getAreaData(2)
  },
  
  activated() {},
  
  mounted() {
  },

  methods: {
    // 点击详情按钮
    getAeraData(data){
      this.show = data.show;
      this.IntimacyShow = data.IntimacyShow
      this.tableTitle = data.title;
      this.dateType = data.dateType;
      this.classId = "0"
      if (data.classId) {
        this.classId = data.classId;
      }
      this.getAreaData(0)
      this.getAreaData(1)
      this.getAreaData(2)
    },
    // 获取班级
    getClassData(data){
      this.areaType = data.areaType
      this.classId = data.classId;
      // this.getAreaData(data.areaType,data.classId)
    },
    // 获取区域人数
    getAreaData(areaType,classId){
      let params = {
        areaType:areaType,
        queryDay:this.$skCommon.getDate(0),
        classId:classId == "0"?null:classId
      }
      let url = this.url.areaCount;
      getAction (url,params).then((res)=>{
        if(res.success){
          let result = res.result.sort((a,b)=>{
            return b.studentCount - a.studentCount
          })
          if (areaType == 0) {
            this.areaPieList[0].data = this.handleData(result.slice(0,10),areaType);
          }
          if (areaType == 1) {
            this.areaPieList[1].data = this.handleData(result.slice(0,10));
          }
          if (areaType == 2) {
            this.areaPieList[2].data = this.handleData(result.slice(0,10));
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    handleData(data,areaType){
      let arr = data.map(item=>{
        let name = "";
        if (this.classId == "0"  && areaType == 0) {
          name = item.className + item.areaName;
        }else{
          name = item.areaName;
        }
        return {
          name:name,
          value:item.studentCount
        }
      })
      return arr.sort((a,b)=>{
        return b.value - a.value
      });;
    },  
    
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.area-pie-col{
  border-right: 1px solid #efefef;
  &:last-child{
    border:none;
  }
}
.area-pie-title{
  padding-left:15%;
  font-size: 18px;
}
</style>
